<template>
    <yh-dialog
        :visible.sync="visibleTemp"
        v-bind="$attrs"
        :title="dialogTitle"
        :modal="false"
        :close-on-click-modal="false"
        drag
        zoomable
        width="750px"
        @close="handleCloseDialog"
    >
        <div class="dialog-main">
            <el-form label-width="110px">
                <div>
                    <el-form-item label="采集器名称:" required>
                        <el-input v-model="submitForm.gatherName" :disabled="isLook" clearable size="mini"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="处理类型:" required>
                        <el-select v-model="submitForm.processType" @change="handleProcessType" :disabled="isLook" size="mini">
                            <el-option v-for="u in processTypeStorage" :key="u.dictKey" :value="u.dictKey" :label="u.dictKeyName"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <!-- sqlReadProcessor表单 SQL方式取数 -->
                <div v-show="submitForm.processType === 'SQL'" class="title-with-box">
                    <el-divider content-position="left">SQL数据采集</el-divider>
                    <el-form label-width="110px">
                        <el-row>
                            <el-form-item label="数据源:" required>
                                <el-select v-model="submitForm.datasourceId" :disabled="isLook" size="mini">
                                    <el-option v-for="u in datasourceStorage" :key="u.id" :value="u.id" :label="u.dataSourceName"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="前缀:" required>
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content" style="white-space: pre">{{ questionTip2 }}</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        前缀:
                                    </span>
                                </template>
                                <el-input v-model="submitForm.prefix" :disabled="isLook" clearable size="mini"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="SQL:" required>
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content" style="white-space: pre">{{ questionTip1 }}</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        SQL:
                                    </span>
                                </template>
                                <el-input
                                    v-model="submitForm.logicContext"
                                    :disabled="isLook"
                                    id="put"
                                    :autosize="{ minRows: 8 }"
                                    type="textarea"
                                    size="mini"
                                    style="width: calc(100% - 95px)"
                                ></el-input>
                                <el-button
                                    size="mini"
                                    icon="el-icon-copy-document"
                                    style="padding: 69px 15px; margin-left: 4px; vertical-align: top"
                                    @click="copyText"
                                >
                                    复制
                                </el-button>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="参数:">
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addFrequency"></i>
                                    </el-col>
                                    <el-col :span="8" style="line-height: 28px">参数名 </el-col>
                                    <el-col :span="8" style="line-height: 28px">参数值 </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in logicParamArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteFrequency(index)"></i>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input v-model="i.dictKeyName" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
                <!-- ApiReadProcessor表单 API方式取数 -->
                <div v-show="submitForm.processType === 'API'" class="title-with-box">
                    <el-divider content-position="left">API数据采集</el-divider>
                    <el-form label-width="110px">
                        <el-row>
                            <el-form-item label="数据源:" required>
                                <el-select v-model="submitForm.datasourceId" @change="handleAPIDataSource" :disabled="isLook" size="mini">
                                    <el-option v-for="u in datasourceStorage" :key="u.id" :value="u.id" :label="u.dataSourceName"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="前缀:" required>
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content" style="white-space: pre">{{ questionTip2 }}</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        前缀:
                                    </span>
                                </template>
                                <el-input v-model="submitForm.prefix" :disabled="isLook" clearable size="mini"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="API接口:" required>
                                <el-input v-model="submitForm.logicContext" :disabled="true" type="textarea" size="mini"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="请求方式:" required>
                                <el-select v-model="submitForm.requestType" @change="$forceUpdate()" :disabled="isLook" size="mini">
                                    <el-option label="GET" value="GET"></el-option>
                                    <el-option label="POST" value="POST"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="参数:">
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addFrequency"></i>
                                    </el-col>
                                    <el-col :span="8" style="line-height: 28px"><span class="red">*</span> 参数名 </el-col>
                                    <el-col :span="8" style="line-height: 28px"><span class="red">*</span> 参数值 </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in logicParamArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteFrequency(index)"></i>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input v-model="i.dictKeyName" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
                <!-- tableColMergeProcessor表单 数据组合 -->
                <div v-show="submitForm.processType === 'COMPOSE'" class="title-with-box">
                    <el-divider content-position="left">数据合并</el-divider>
                    <el-form label-width="140px">
                        <el-row style="display: flex">
                            <el-form-item label="左数据集列索引:" required>
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addIndexLeft"></i>
                                    </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in indexLeftArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteIndexLeft(index)"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>

                            <el-form-item label="右数据集列索引:" required>
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addIndexRight"></i>
                                    </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in indexRightArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteIndexRight(index)"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
                <!-- tableColSelectProcessor表单 列选择 -->
                <div v-show="submitForm.processType === 'SELECT_COLUMN'" class="title-with-box">
                    <el-divider content-position="left">列选择</el-divider>
                    <el-form label-width="140px">
                        <el-row style="display: flex">
                            <el-form-item label="选中的目标列索引:" required>
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addIndex"></i>
                                    </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in indexArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteIndex(index)"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" v-show="type !== 'look' && ['SQL', 'API'].includes(submitForm.processType)" type="primary" @click="handleTest">
                测 试
            </el-button>
            <el-button size="mini" v-show="type !== 'look'" @click="handleReset"> 重 置 </el-button>
            <el-button size="mini" @click="handleCloseDialog"> 取 消 </el-button>
            <el-button size="mini" v-show="type !== 'look'" :loading="loading" type="primary" @click="handleSave"> 确 认 </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import { DictVO } from '@/common/vo';
import { AggregatorVO } from '../vo/monitor-rule-setting';
import { DataSourceRepVO, DataSourceVO } from '../vo/data-source';
import API2 from '../api/data-source';
import DictionConstUtil, { objToArr } from '@/utils/diction-const-util';

@Component({ name: 'AggregatorDialog', components: {} })
export default class AggregatorDialog extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop() detail: any;
    @Prop() type: string; // add | look

    public visibleTemp: boolean = false;

    submitForm: AggregatorVO = {
        gatherName: '',
        processType: 'SQL',
        datasourceId: '',
        prefix: '',
        logicContext: '',
        logicParam: {},
        requestType: '',
    };

    loading: boolean = false;

    processTypeStorage: DictVO[] = [
        { dictKey: 'SQL', dictKeyName: 'SQL数据采集' },
        { dictKey: 'API', dictKeyName: 'API数据采集' },
        { dictKey: 'COMPOSE', dictKeyName: '数据合并' },
        { dictKey: 'SELECT_COLUMN', dictKeyName: '列选择' },
    ]; // 处理类型仓库

    logicParamArr: any[] = []; // 参数列表
    indexLeftArr: any[] = [{ dictKey: '', dictKeyName: '' }]; // 左索引
    indexRightArr: any[] = [{ dictKey: '', dictKeyName: '' }]; // 右索引
    indexArr: any[] = [{ dictKey: '', dictKeyName: '' }]; // 列选择

    datasourceStorageAll: DataSourceVO[] = [];

    questionTip1: string =
        '通过SQL语句进行采集数据\n例子：select 列1,列n from dual where 列名1=#S{val1} AND 列名2=#N{val2}\n#S{}：值前后带单引号，适合字符型\n#N{}：值不带单引号，适合数值型';
    questionTip2: string = '用于区分每个采集数据源的标识、数据列名前面会拼接上该前缀\n例子：风控：RISK_、恒生：HS_';

    created() {}

    mounted() {
        if (['look', 'edit'].includes(this.type)) {
            this.submitForm = JSON.parse(JSON.stringify(this.detail));
            // 将logicContext转换成UI组件可用格式
            this.packageLogicContext2(this.submitForm.processType, this.submitForm.logicContext);
        }

        API2.getDataSourceList({
            codeOrName: '',
            id: '',
            dataSourceTypeList: [],
            dataSourceName: '',
            jdbcUrl: '',
            apiUrl: '',
            monitorInfo: '',
            remark: '',
            dtCtUser: '',
            dtMdUser: '',
            paging: { pageSize: 10000, currentPage: 1 },
        }).then((res: DataSourceRepVO) => {
            this.datasourceStorageAll = res?.list || [];
        });
    }

    @Watch('visible', { immediate: true, deep: true })
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    get dialogTitle() {
        const enumT = { add: '新增', look: '查看', edit: '编辑' };
        return `${enumT[this.type]}采集器`;
    }

    get isLook() {
        return this.type === 'look';
    }

    get datasourceStorage() {
        if (this.submitForm.processType === 'SQL') {
            return this.datasourceStorageAll.filter(i => ['ORACLE', 'MYSQL'].includes(i.dataSourceType));
        } else if (this.submitForm.processType === 'API') {
            return this.datasourceStorageAll.filter(i => i.dataSourceType === 'API');
        } else {
            return [];
        }
    }

    // @Watch('detail', { immediate: true })
    // watchdetail(newData) {
    //     if (newData) {
    //         this.submitForm = data;
    //     }
    // }

    /**
     * 处理类型变动事件
     * @val 选中值
     */
    handleProcessType(val: string): void {
        this.submitForm.datasourceId = '';
        this.submitForm.prefix = '';
        this.submitForm.logicContext = '';
        this.submitForm.logicParam = [];
        this.submitForm.requestType = '';

        this.logicParamArr = [];
        this.indexLeftArr = [{ dictKey: '', dictKeyName: '' }]; // 左索引
        this.indexRightArr = [{ dictKey: '', dictKeyName: '' }]; // 右索引
        this.indexArr = [{ dictKey: '', dictKeyName: '' }]; // 列选择
    }

    /**
     * 新增参数列表
     */
    addFrequency(): void {
        // if (this.logicParamArr.length >= 10) {
        //     this.yh_message_warn('参数最多设置10条!');
        //     return;
        // }
        if (this.isLook) return;
        this.logicParamArr.push({ dictKey: '', dictKeyName: '' });
    }

    /**
     * 删除参数列表
     * @param index 所处下标
     */
    deleteFrequency(index: number): void {
        if (this.isLook) return;
        // if (this.logicParamArr.length === 1) {
        //     this.yh_message_warn('参数最少设置1条!');
        //     return;
        // }
        this.logicParamArr = this.logicParamArr.filter((i, index1) => index1 !== index);
    }

    /**
     * 新增左索引
     */
    addIndex(): void {
        if (this.isLook) return;
        this.indexArr.push({ dictKey: '', dictKeyName: '' });
    }

    /**
     * 删除左索引
     * @param index 所处下标
     */
    deleteIndex(index: number): void {
        if (this.isLook) return;
        if (this.indexArr.length === 1) {
            this.yh_message_warn('索引最少设置1条!');
            return;
        }
        this.indexArr = this.indexArr.filter((i, index1) => index1 !== index);
    }

    /**
     * 新增左索引
     */
    addIndexLeft(): void {
        if (this.isLook) return;
        this.indexLeftArr.push({ dictKey: '', dictKeyName: '' });
        this.indexRightArr.push({ dictKey: '', dictKeyName: '' });
    }

    /**
     * 删除左索引
     * @param index 所处下标
     */
    deleteIndexLeft(index: number): void {
        if (this.isLook) return;
        if (this.indexLeftArr.length === 1) {
            this.yh_message_warn('索引最少设置1条!');
            return;
        }
        this.indexLeftArr = this.indexLeftArr.filter((i, index1) => index1 !== index);
        this.indexRightArr = this.indexRightArr.filter((i, index1) => index1 !== index);
    }

    /**
     * 新增右索引
     */
    addIndexRight(): void {
        if (this.isLook) return;
        this.indexLeftArr.push({ dictKey: '', dictKeyName: '' });
        this.indexRightArr.push({ dictKey: '', dictKeyName: '' });
    }

    /**
     * 删除右索引
     * @param index 所处下标
     */
    deleteIndexRight(index: number): void {
        if (this.isLook) return;
        if (this.indexRightArr.length === 1) {
            this.yh_message_warn('索引最少设置1条!');
            return;
        }
        this.indexLeftArr = this.indexLeftArr.filter((i, index1) => index1 !== index);
        this.indexRightArr = this.indexRightArr.filter((i, index1) => index1 !== index);
    }

    /**
     * API数据源变动事件 => 带出 API接口
     */
    handleAPIDataSource(id): void {
        const data = this.datasourceStorage.find(i => i.id === id);
        this.submitForm.logicContext = data.apiUrl;
    }

    /**
     * 保存事件
     */
    handleSave(): void {
        if (!this.verify()) return;
        this.loading = true;

        this.submitForm.logicContext = JSON.stringify(this.packageLogicContext(this.submitForm.processType));
        if (this.submitForm.processType === 'SQL' || this.submitForm.processType === 'API') {
            // this.submitForm.logicParam = JSON.stringify(DictionConstUtil.ListToPojo(this.logicParamArr));

            this.submitForm.logicParam = DictionConstUtil.ListToPojo(this.logicParamArr);
            const data = this.submitForm.logicParam;
            for (let i in data) {
                if (this.submitForm.logicParam[i][0] === '{') {
                    this.submitForm.logicParam[i] = JSON.parse(this.submitForm.logicParam[i]);
                }
            }
            this.submitForm.logicParam = JSON.stringify(this.submitForm.logicParam);
            this.submitForm.logicContext = JSON.parse(this.submitForm.logicContext);
        }

        console.log(this.submitForm, 'this.submitForm');
        this.$emit('submit', this.submitForm);
    }

    verify() {
        if (!this.submitForm.gatherName) {
            this.yh_message_warn('采集器名称不能为空!');
            return false;
        }
        if (!this.submitForm.processType.trim()) {
            this.yh_message_warn('处理类型不能为空!');
            return false;
        }

        if (this.submitForm.processType === 'SQL' || this.submitForm.processType === 'API') {
            if (!this.submitForm.datasourceId) {
                this.yh_message_warn('数据源不能为空!');
                return false;
            }
            if (!this.submitForm.prefix.trim()) {
                this.yh_message_warn('前缀不能为空!');
                return false;
            }
            if (!this.submitForm.logicContext) {
                if (this.submitForm.processType === 'SQL') {
                    this.yh_message_warn('SQL不能为空!');
                    return;
                }
                if (this.submitForm.processType === 'API') {
                    this.yh_message_warn('API接口不能为空!');
                    return;
                }
            }

            if (this.logicParamArr.length > 0) {
                for (let i = 0; i < this.logicParamArr.length; i++) {
                    if (!this.logicParamArr[i].dictKey || !this.logicParamArr[i].dictKeyName) {
                        this.yh_message_warn('参数不能为空!');
                        return false;
                    }
                }
            }
        }

        if (this.submitForm.processType === 'SQL') {
            const regex = new RegExp('#', 'g'); // 使用g表示整个字符串都要匹配
            const result = (this.submitForm.logicContext as any).match(regex); // match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
            const count = !result ? 0 : result.length;
            if (count !== this.logicParamArr.length) {
                this.yh_message_warn('SQL参数数量不一致');
                return false;
            }
        }

        if (this.submitForm.processType === 'API') {
            if (!this.submitForm.requestType) {
                this.yh_message_warn('请求方式不能为空!');
                return false;
            }
        }

        if (this.submitForm.processType === 'COMPOSE') {
            for (let i = 0; i < this.indexLeftArr.length; i++) {
                if (!this.indexLeftArr[i].dictKey) {
                    this.yh_message_warn('左数据集列索引不能为空!');
                    return false;
                }
            }
            for (let i = 0; i < this.indexRightArr.length; i++) {
                if (!this.indexRightArr[i].dictKey) {
                    this.yh_message_warn('右数据集列索引不能为空!');
                    return false;
                }
            }
        }

        if (this.submitForm.processType === 'SELECT_COLUMN') {
            for (let i = 0; i < this.indexArr.length; i++) {
                if (!this.indexArr[i].dictKey) {
                    this.yh_message_warn('选中的目标列索引不能为空!');
                    return false;
                }
            }
        }

        // if (JSON.stringify(this.submitForm) === JSON.stringify(this.detail)) {
        //     this.yh_message_warn('数据源无修改!');
        //     return false;
        // }
        return true;
    }

    handleReset(): void {
        this.submitForm.gatherName = '';
        this.submitForm.processType = 'SQL';
        this.submitForm.datasourceId = '';
        this.submitForm.prefix = '';
        this.submitForm.logicContext = '';
        this.submitForm.logicParam = [];
        this.submitForm.requestType = '';
        this.logicParamArr = [];
        this.indexLeftArr = [{ dictKey: '', dictKeyName: '' }]; // 左索引
        this.indexRightArr = [{ dictKey: '', dictKeyName: '' }]; // 右索引
        this.indexArr = [{ dictKey: '', dictKeyName: '' }]; // 列选择
    }

    /**
     * 组装logicContext  4种表单共用这个字段 根据类型转换不同数据格式
     * @param processType 处理类型
     */
    packageLogicContext(processType: string): string | string[] {
        if (processType === 'SQL' || processType === 'API') {
            return this.submitForm.logicContext;
        } else if (processType === 'COMPOSE') {
            let arr = [];
            for (let i = 0; i < this.indexLeftArr.length; i++) {
                arr.push(this.indexLeftArr[i].dictKey + ',' + this.indexRightArr[i].dictKey);
            }
            return arr;
        } else if (processType === 'SELECT_COLUMN') {
            return this.indexArr.map(i => i.dictKey);
        } else {
            return 'ERR: no processType';
        }
    }

    /**
     * 将logicContext转换成UI组件可用格式 4种表单共用这个字段 根据类型转换不同数据格式
     * @param processType 处理类型
     * @param logicContext
     */
    packageLogicContext2(processType: string, logicContext): void {
        if (processType === 'SQL' || processType === 'API') {
            // 使用返回原值即可
            // 在这里额外 转换一下 logicParam
            let data = JSON.parse(this.submitForm.logicParam);
            for (let i in data) {
                if (typeof data[i] == 'object') {
                    data[i] = JSON.stringify(data[i]);
                }
            }

            this.logicParamArr = objToArr(data);
        } else if (processType === 'COMPOSE') {
            logicContext = JSON.parse(logicContext);
            let indexLeftArr = [];
            let indexRightArr = [];
            for (let i = 0; i < logicContext.length; i++) {
                const element = logicContext[i].split(',');
                indexLeftArr.push({ dictKey: element[0], dictKeyName: element[0] });
                indexRightArr.push({ dictKey: element[1], dictKeyName: element[1] });
            }
            this.indexLeftArr = indexLeftArr;
            this.indexRightArr = indexRightArr;
        } else if (processType === 'SELECT_COLUMN') {
            logicContext = JSON.parse(logicContext);
            let indexArr = [];
            for (let i = 0; i < logicContext.length; i++) {
                indexArr.push({ dictKey: logicContext[i], dictKeyName: logicContext[i] });
            }
            this.indexArr = indexArr;
        } else {
            // return 'ERR: no processType';
        }
    }

    /**
     * 数据源测试连接
     */
    handleTest() {
        this.submitForm.logicContext = JSON.stringify(this.packageLogicContext(this.submitForm.processType));
        if (this.submitForm.processType === 'SQL' || this.submitForm.processType === 'API') {
            this.submitForm.logicParam = DictionConstUtil.ListToPojo(this.logicParamArr);
            const data = this.submitForm.logicParam;
            for (let i in data) {
                if (this.submitForm.logicParam[i][0] === '{') {
                    this.submitForm.logicParam[i] = JSON.parse(this.submitForm.logicParam[i]);
                }
            }
            this.submitForm.logicParam = JSON.stringify(this.submitForm.logicParam);
            this.submitForm.logicContext = JSON.parse(this.submitForm.logicContext);
        }
        // if (!this.verify()) return;
        API2.testLink(this.submitForm).then((res: any) => {
            this.yh_message_success('连接成功!');
        });
    }

    copyText() {
        const d = document.getElementById('put') as any; // 获取需要复制的元素
        d.select(); // 选中
        document.execCommand('copy'); // 直接复制
        this.yh_message_success('复制成功!');
    }

    /**
     * 关闭dialog事件
     */
    handleCloseDialog(): void {
        this.syncVisible = false;
    }
}
</script>
<style lang="scss" scoped>
.title-with-box {
    border: 1px solid #dcdfe6;
    border-top: none;

    // /deep/ .el-divider--horizontal {
    //     height: 2px;
    // }

    /deep/ .el-divider__text {
        padding: 0 15px;
        font-weight: 600;
        font-size: 15px;
    }

    .frequency-box {
        // margin-bottom: 10px;

        /deep/ .el-col-2 {
            text-align: right;
            padding-right: 20px;
            line-height: 28px;

            .el-icon-plus,
            .el-icon-minus {
                font-size: 17px;
                font-weight: 600;
                cursor: pointer;
            }
        }
    }

    .logic-box {
        display: flex;
        padding: 0 10px;

        .flex1 {
            flex: 1;

            /deep/ .el-button {
                padding: 4px 10px;
                border-radius: 7px;
                .el-icon-plus {
                    font-weight: 600;
                }
            }
        }

        /deep/ .el-card__body {
            padding: 10px;
        }
        p {
            padding-left: 5px;
            margin-bottom: 10px;
        }

        li {
            position: relative;
            border: 1px solid #dcdfe6;
            margin-bottom: -1px;
            border-radius: 4px;
            // height: 30px;
            // line-height: 30px;
            padding: 4px 10px;

            .btn {
                position: absolute;
                right: 0;
                top: 4px;
            }
            .title,
            .link {
                color: #0000ffd7;
            }

            .link {
                cursor: pointer;
                margin-right: 15px;
            }
        }
    }
    .red {
        color: red !important;
    }
}
/deep/ .el-form-item {
    padding: 0 5px;
    margin-bottom: 10px;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: '*' !important;
    color: red !important;
    margin-right: 4px !important;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    content: '' !important;
}
</style>
